<template>
  <div class="group-container">
    <el-card shadow="never">
      <!---搜索框----->
      <div class="group-header">
        <el-form :inline="true" :model="queryParams">
          <el-form-item>
            <span class="title-label">工作组名称</span>
            <el-input
              v-model="queryParams.group_name"
              placeholder="请输入工作组名称"
              style="width: 300px"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <span class="title-label">状态</span>
            <el-select
              v-model="queryParams.status"
              placeholder="菜单状态"
              style="width: 220px"
            >
              <el-option label="正常" :value="0"></el-option>
              <el-option label="停用" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="margin-left: 25px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索
            </el-button>
                        <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getMyGroup"
              >我的工作组
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-----表格------>
      <div class="group-body">
        <el-table
          ref="table"
          :data="groupList"
          :border="false"
          style="width: 100%"
          :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
          :default-sort="{ prop: 'status', order: 'ascending' }"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <!-----表格居中------>
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-table
                  :data="getGroupMembersByGroupId(props.row.groupId)"
                  style="width: 100% border: 1px solid #ebeef5"
                  :border="true"
                  :header-cell-style="{
                    background: '#F2F6FC',
                    color: '#606266',
                  }"
                >
                  <el-table-column
                    fixed
                    label="组员序号"
                    align="center"
                    style="width: 20%"
                  >
                    <template scope="scope">
                      <span>{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="nickName"
                    label="昵称"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="roleNameZh"
                    label="角色名称"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-tag type="info">{{ scope.row.roleNameZh }}</el-tag>
                    </template></el-table-column
                  >
                </el-table>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="序号"
            prop="groupId"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="名称" prop="groupName" align="center" />
          <el-table-column label="组长" prop="nickName" align="center" />
          <el-table-column label="创建时间" prop="startDate" align="center" />
          <el-table-column label="截止时间" prop="dueDate" align="center" />
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag v-if="!scope.row.status" type="success">正常</el-tag>
              <el-tag v-else type="danger">停用</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-----分页------>
      <div class="user-footer">
        <el-pagination
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getAllGroup,
  findEmployeeByGroupId,
  findGroupByUserId,
} from "@/api/group";
import { ref } from "vue";

export default {
  name: "Group",
  data() {
    return {
      // 查询参数
      queryParams: {
        // 菜单名称
        group_name: "",
        // 菜单状态
        status: "",
      },

      //工作组总数
      total: 0,
      // 当前页数
      curPage: 1,
      // 页面大小
      size: 10,

      // 工作组列表
      groupList: [],
      groupIdList: [],

      groupMenberInfoList: [
        {
          groupId: "",
          groupMenberInfo: [],
        },
      ],

      // 表格数据是否重新渲染
      refreshTable: true,

      groupDTOForSearch: {
        dueDate: "",
        groupId: -1,
        groupLeaderId: -1,
        groupName: "",
        startTime: "",
        status: -1,
      },
    };
  },

  mounted() {
    this.getTableData();
  },

  methods: {
    // 获取表格数据
    getTableData() {
      getAllGroup({
        curPage: this.curPage,
        size: this.size,
        groupDTO: this.groupDTOForSearch,
      }).then((result) => {
        this.groupList = result.list;
        this.total = result.total;
        this.getGroupIdList();
        this.getGroupMembers();
      });
    },

    // 保存groupId到groupIdList
    getGroupIdList() {
      for (let i = 0; i < this.groupList.length; i++) {
        // 当groupIdList不含groupId时加入
        if (!this.groupIdList.includes(this.groupList[i].groupId)) {
          this.groupIdList.push(this.groupList[i].groupId);
        }
      }
    },

    // 获取所有工作组人员信息
    getGroupMembers() {
      for (let i = 0; i < this.groupIdList.length; i++) {
        findEmployeeByGroupId({
          group_id: this.groupIdList[i],
        }).then((result) => {
          // 保存数据
          const temp = {
            groupId: this.groupIdList[i],
            groupMenberInfo: result,
          };
          this.groupMenberInfoList.push(temp);
        });
      }
      this.groupMenberInfoList.shift();
    },

    // 根据groupId找到对应的组成员信息
    getGroupMembersByGroupId(groupId) {
      const groupInfo = this.groupMenberInfoList.find(
        (group) => group.groupId === groupId
      );
      return groupInfo ? groupInfo.groupMenberInfo : [];
    },
    expandAll() {
      this.$refs.expandTable.toggleAllSelection();
    },
    collapseAll() {
      this.$refs.expandTable.clearSelection();
    },

    // 获取我参加的组
    getMyGroup() {
      findGroupByUserId().then((result) => {
        this.groupList = result;
        this.total = this.groupList.length;
      });
    },

    // 当页面大小发生变化时
    handleSizeChange(val) {
      this.size = val;
      // 重新获取数据
      this.getTableData();
    },

    // 点击了重置按钮
    resetQuery() {
      // 重新设置查询参数
      this.queryParams.group_name = "";
      // 菜单状态
      this.queryParams.status = "";

      this.getTableData();
    },

    // 当前页发生变化时
    handleCurrentChange(val) {
      this.curPage = val;
      // 重新获取数据
      this.getTableData();
    },

    // 条件搜索
    handleQuery() {
      this.getGroupsByParams();
    },
    getGroupsByParams() {
      getAllGroup({
        curPage: this.curPage,
        size: this.size,
        groupName: this.queryParams.group_name,
        status: this.queryParams.status,
      }).then((result) => {
        this.groupList = result.list;
        this.total = result.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.group-container {
  margin-top: 10px;

  .group-header {
    margin-top: 10px;
    padding-left: 15px;

    .title-label {
      font-size: 14px;
      font-weight: 700;
      color: #606266;
      margin-right: 12px;
    }
  }

  .group-body {
    margin: 20px 15px 30px 15px;
  }

  .user-footer {
    padding-left: 15px;
    margin-top: 40px;
  }
}
</style>
